<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { Carousel } from 'bootstrap'
import featuresArea from './features-area/index.vue'
import showArea from './show-area/index.vue'
import signUp from './sign-up/index.vue'
import news from './news/index.vue'
import '@/hooks/use-gtag'

const isNavbarSticky = ref(false)
const isMbNavSticky = ref(false)
function handleScroll() {
  const scrollTop = window.scrollY || document.documentElement.scrollTop
  isNavbarSticky.value = scrollTop > 100
  isMbNavSticky.value = scrollTop > 50
}

onMounted(() => {
  function observe(size, id) {
    const buttons = document.querySelectorAll(`#${id} div.roadmap-btn`)
    const carousel = new Carousel(document.getElementById(`roadMapCarousel${size}`), {
      touch: false
    })
    buttons.forEach(function (div, index) {
      // 如果绑定过这个事件，先解绑
      div.removeEventListener('click', function () {
        buttons[index].classList.add('active')
        buttons[(index + 1) % 2].classList.remove('active')
        carousel.to(index)
      })

      div.addEventListener('click', function () {
        buttons[index].classList.add('active')
        buttons[(index + 1) % 2].classList.remove('active')
        carousel.to(index)
      })
    })
  }

  // 根据宽度隐藏id为navbarOffcanvas的侧边栏
  window.addEventListener('resize', handleResize)

  function handleResize() {
    const secondSamll = document.getElementById('second-small')
    const thirdSmall = document.getElementById('third-small')
    const aboutDmdSmall = document.getElementById('about-dmd-small')
    const raodMapSmall = document.getElementById('roadmap-area-small')

    const secondLarge = document.getElementById('second-large')
    const thirdLarge = document.getElementById('third-large')
    const aboutDmdLarge = document.getElementById('about-dmd-large')
    const raodMapLarge = document.getElementById('roadmap-area-large')

    if (window.innerWidth > 992) {
      secondSamll.style.display = 'none'
      secondLarge.style.display = 'block'

      thirdSmall.style.display = 'none'
      thirdLarge.style.display = 'block'

      aboutDmdSmall.style.display = 'none'
      aboutDmdLarge.style.display = 'block'

      raodMapSmall.style.display = 'none'
      raodMapLarge.style.display = 'block'

      observe('Large', 'roadmap-area-large')
    } else {
      secondLarge.style.display = 'none'
      secondSamll.style.display = 'block'

      thirdLarge.style.display = 'none'
      thirdSmall.style.display = 'block'

      aboutDmdLarge.style.display = 'none'
      aboutDmdSmall.style.display = 'block'

      raodMapLarge.style.display = 'none'
      raodMapSmall.style.display = 'block'

      observe('Small', 'roadmap-area-small')
    }
  }

  handleResize()
  window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
  window.removeEventListener('resize')
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <main>
    <!-- Start Navbar Area -->
    <nav
      ref="navbar"
      class="navbar navbar-expand-lg mb-nav"
      :class="{ sticky: isNavbarSticky || isMbNavSticky }"
      id="navbar"
    >
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
          <div style="display: flex; align-items: center">
            <img
              alt="DREAMWORLDS"
              src="/src/assets/img/newlogo.png"
              style="height: 40px; margin-right: 10px"
            />
            <h3 style="margin: 0">DREAMWORLDS</h3>
          </div>
        </a>
        <!-- 侧边菜单栏开关 -->
        <a
          aria-controls="navbarOffcanvas"
          class="navbar-toggler text-decoration-none"
          data-bs-toggle="offcanvas"
          href="#navbarOffcanvas"
          role="button"
        >
          <span class="burger-menu">
            <span class="top-bar"></span>
            <span class="middle-bar"></span>
            <span class="bottom-bar"></span>
          </span>
        </a>
        <div class="collapse navbar-collapse">
          <ul class="navbar-nav mr-4">
            <!--        <li class="nav-item">-->
            <!--          <a href="index.html" class="nav-link active"> Home </a>-->
            <!--        </li>-->

            <li class="nav-item">
              <a class="nav-link active" target="_blank"> Store </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">Ai university </a>
            </li>
            <li class="nav-item">
              <a class="dropdown-toggle nav-link" href="javascript:void(0)"> Community </a>
              <ul class="dropdown-menu">
                <li class="nav-item">
                  <a class="nav-link" href="https://t.me/DMDcoinEnglish"> Telegram </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="https://twitter.com/Dreamworld49453"> Twitter </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="dropdown-toggle nav-link" href="javascript:void(0)">Partnerships </a>
              <ul class="dropdown-menu">
                <li class="nav-item">
                  <a class="nav-link" href=""> White Paper </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">xxxx</a>
                </li>
              </ul>
            </li>
          </ul>
          <button class="default-btn nav">
            <img
              alt="logo"
              src="/src/assets/img/icon_chain_white.svg"
              style="height: 28px; width: 28px; vertical-align: middle; margin-right: 10px"
            />
            AI Pass
          </button>
          <!--      <button class="default-btn" id="connectButton">-->
          <!--        Connect Wallet-->
          <!--        <i class="ri-arrow-right-line"></i>-->
          <!--      </button>-->
          <!-- 搜索栏 -->
          <!-- <form class="d-flex" id="searchForm" style="margin-left: 10px">
            <input
              aria-label="Search"
              class="form-control"
              placeholder="Search"
              style="border: none; background: transparent; color: white; margin-right: 5px"
              type="search"
            />
            <button class="btn" style="background: none; border: none; color: white; padding: 0" type="submit">
              <i class="ri-search-line" style="font-size: 20px; color: rgba(238, 223, 254, 0.6)"></i>
            </button>
          </form> -->
        </div>
      </div>
    </nav>
    <!-- End Navbar Area -->

    <!--        侧边栏菜单-->
    <!-- Start Responsive Navbar Area -->
    <div
      class="responsive-navbar offcanvas offcanvas-end border-0"
      data-bs-backdrop="static"
      id="navbarOffcanvas"
      tabindex="-1"
    >
      <div class="offcanvas-header">
        <a class="logo d-inline-block" href="index.html">
          <img
            alt="DREAMWORLDS"
            src="/src/assets/img/newlogo.png"
            style="height: 40px; vertical-align: middle; margin-right: 10px"
          />
          <h2 style="display: inline-block; vertical-align: middle; margin: 0">DREAMWORLDS</h2>
        </a>
        <button
          aria-label="Close"
          class="close-btn bg-transparent position-relative lh-1 p-0 border-0"
          data-bs-dismiss="offcanvas"
          type="button"
        >
          <i class="ri-close-line"></i>
        </button>
      </div>
      <div class="offcanvas-body">
        <ul class="responsive-menu">
          <!-- <li class="responsive-menu-list without-icon">
                      <a href="index.html" class="active">Home</a>
                    </li> -->
          <li class="responsive-menu-list without-icon">
            <a class="nav-link" target="_blank">Store</a>
          </li>
          <li class="responsive-menu-list without-icon">
            <a class="nav-link" target="_blank">Ai university</a>
          </li>
          <li class="responsive-menu-list">
            <a class="dropdown-toggle nav-link" href="javascript:void(0);">Community</a>
            <ul class="responsive-menu-items">
              <li><a href="https://t.me/DMDcoinEnglish" target="_blank">Telegram</a></li>
              <li><a href="https://twitter.com/Dreamworld49453" target="_blank">Twitter</a></li>
            </ul>
          </li>
          <li class="responsive-menu-list without-icon">
            <a class="dropdown-toggle nav-link" href="javascript:void(0);">Partnerships</a>
            <ul class="responsive-menu-items">
              <li><a href="" target="_blank">White Paper</a></li>
              <li><a href="" target="_blank"></a></li>
            </ul>
          </li>
        </ul>

        <div class="others-option d-md-flex align-items-center">
          <div class="option-item">
            <button class="default-btn">DMD Pass</button>
          </div>
        </div>
        <div class="others-option d-md-flex align-items-center">
          <div class="option-item">
            <a class="default-btn" href="https://phantom.app/" target="_blank">
              <i class="ri-arrow-right-line"></i>
              <span>Connect Wallet</span>
            </a>
          </div>
        </div>

        <form class="d-flex" style="margin-top: 10px">
          <input
            aria-label="Search"
            class="form-control"
            placeholder="Search"
            style="border: none; background: transparent; color: white; margin-right: 5px"
            type="search"
          />
          <button
            class="btn"
            style="background: none; border: none; color: white; padding: 0"
            type="submit"
          >
            <i class="ri-search-line" style="font-size: 20px"></i>
          </button>
        </form>
      </div>
    </div>

    <!-- End Responsive Navbar Area -->

    <!-- Start Banner Area -->
    <div class="banner-area">
      <div class="container-fluid" style="padding-left: 0">
        <div class="row align-items-center g-0" data-aos="fade-up" data-aos-duration="1500">
          <div class="col-lg-6">
            <div class="content">
              <h1>
                A world where Al is <br />
                accessible to<br />
                everyone.
              </h1>
              <p>
                Dreamworlds is a distribution platform for discovering, accessing and learning about
                how Al can improve our everyday lives
              </p>

              <!-- 搜索栏 -->
              <div class="searchwrapper"></div>
            </div>
          </div>
          <div class="col-lg-6"></div>
        </div>
        <!--        <div class="scroll-down">-->
        <!--            <a href="#features">-->
        <!--                <div class="mouse"></div>-->
        <!--            </a>-->
        <!--        </div>-->
      </div>
    </div>
    <!-- End Banner Area -->

    <!--homepage2-->
    <!-- 第二屏-->

    <features-area data-aos="fade-up" data-aos-duration="1500"></features-area>
    <show-area data-aos="fade-up" data-aos-duration="1500"></show-area>
    <news data-aos="fade-up" data-aos-duration="1500"></news>
    <sign-up data-aos="fade-up" data-aos-duration="1500"></sign-up>

    <!-- large -->
    <div class="about-area ptb-100 section-bg" id="second-large">
      <div class="container-fluid">
        <div
          class="row flex-row-reverse align-items-start"
          data-aos="fade-up"
          data-aos-duration="1500"
        >
          <div class="col-xl-7">
            <div class="content">
              <!--<img src="/src/assets/img/video.jpg" style="width: 100%" />-->
              <!-- 文案部分 -->
              <!--视频部分-->
              <iframe
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
                frameborder="0"
                referrerpolicy="strict-origin-when-cross-origin"
                src="https://www.youtube.com/embed/vrcbDvGz1HI?si=-JYtcK-wSHdIxGgm"
                style="height: 405px; width: 100%"
                title="YouTube video player"
              ></iframe>
              <h3 class="about-area-h3">Characters That Feel Real</h3>
              <p>
                Dreamworlds is leveraging advancements in Natural Language Processing, speech
                synthesis and animation to create characters able to communicate with the nuance and
                expressiveness of a human.
              </p>
            </div>
          </div>
          <div class="col-xl-5">
            <div class="content">
              <!-- 图片部分 -->
              <div>
                <img
                  alt="Description of the image"
                  src="/src/assets/img/2-1.png"
                  style="height: 100%"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- small -->
    <div class="about-area ptb-100 section-bg" id="second-small">
      <div class="container-fluid">
        <div
          class="row flex-row-reverse align-items-start"
          data-aos="fade-up"
          data-aos-duration="1500"
        >
          <div class="col-xl-7 mb-3">
            <div class="content">
              <img src="/src/assets/img/video.jpg" style="width: 100%" />
            </div>
          </div>
          <div class="col-xl-5">
            <div class="content d-flex">
              <!-- 图片部分 -->
              <div class="col-5">
                <img alt="Description of the image" src="/src/assets/img/2-1.png" />
              </div>
              <!-- 文案部分 -->
              <div class="text-content col-7">
                <h3 class="about-area-h3 mt-0 mb-2">Characters That Feel Real</h3>
                <p>
                  Dreamworlds is leveraging advancements in Natural Language Processing, speech
                  synthesis and animation to create characters able to communicate with the nuance
                  and expressiveness of a human.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二屏结束 -->

    <!--第三屏-->
    <!-- Start Fetuses Area -->
    <section class="fetuses-area section-bg">
      <!-- large -->
      <div class="container-fluid" id="third-large" style="padding: 0 100px">
        <div class="single-fetuses-box" data-aos="fade-up" data-aos-duration="1500">
          <h1 class="text-center" style="padding: 40px 0 100px">Fully Immersive Experiences</h1>
        </div>
        <div class="row justify-content-center g-0" style="padding-bottom: 100px">
          <div class="col-lg-4 col-md-6">
            <div class="single-fetuses-box" data-aos="fade-up" data-aos-duration="1500">
              <div class="icon"></div>
              <img alt="1.png" src="/src/assets/img/1.png" />
              <h4>Licensed Celebrities</h4>
              <p>
                Invite your favorite celebrity over and surprise your friends with an unforgettable
                Saturday night.
              </p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6">
            <div class="single-fetuses-box" data-aos="fade-up" data-aos-duration="1500">
              <img alt="2.png" src="/src/assets/img/2.png" />
              <h4>Movies Re-Imagined</h4>
              <p>
                Become the action hero! Step into your favorite movies or books and rewrite the
                script.
              </p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6">
            <div class="single-fetuses-box" data-aos="fade-up" data-aos-duration="1500">
              <img alt="3.png" src="/src/assets/img/3.png" />
              <h4>Live Sports</h4>
              <p>
                Feel the roar of the crowd up close! Live the thrill of your favorite sports from
                any angle.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- small -->
      <div class="container-fluid" id="third-small">
        <div class="single-fetuses-box" data-aos="fade-up" data-aos-duration="1500">
          <h1 class="text-center">Fully Immersive Experiences</h1>
        </div>
        <div class="carousel slide" data-bs-ride="carousel" id="carouselExampleAutoplaying">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="col-lg-4 col-md-6">
                <div class="single-fetuses-box" data-aos="fade-up" data-aos-duration="1500">
                  <div class="icon"></div>
                  <img alt="1.png" src="/src/assets/img/1.png" />
                  <h4>Licensed Celebrities</h4>
                  <p>
                    Invite your favorite celebrity over and surprise your friends with an
                    unforgettable Saturday night.
                  </p>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="col-lg-4 col-md-6">
                <div class="single-fetuses-box" data-aos="fade-up" data-aos-duration="1500">
                  <img alt="2.png" src="/src/assets/img/2.png" />
                  <h4>Movies Re-Imagined</h4>
                  <p>
                    Become the action hero! Step into your favorite movies or books and rewrite the
                    script.
                  </p>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="col-lg-4 col-md-6">
                <div class="single-fetuses-box" data-aos="fade-up" data-aos-duration="1500">
                  <img alt="3.png" src="/src/assets/img/3.png" />
                  <h4>Live Sports</h4>
                  <p>
                    Feel the roar of the crowd up close! Live the thrill of your favorite sports
                    from any angle.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Fetuses Area -->

    <!-- About Dmd -->
    <section class="about-dmd section-bg" style="overflow: hidden">
      <!-- large -->
      <div class="container-fluid" id="about-dmd-large">
        <div class="d-flex align-items-center" data-aos="fade-up" data-aos-duration="1500">
          <img class="top-icon" src="/src/assets/img/Group_2440.png" />
          <h1>ABOUT DMD</h1>
        </div>
        <div class="main-container" data-aos="fade-up" data-aos-duration="1500">
          <div class="sub-title">DMD is the economic and governance token for Dreamworlds.</div>
          <div class="info d-flex">
            <div class="d-flex flex-column" style="min-width: 400px; max-width: 440px">
              <img alt="DMD Logo" src="/src/assets/img/DMDtokens%202.png" />
              <button class="default-btn" style="margin: 0; border-radius: 0">
                <a
                  href="airdrop/airdrop-EN.html"
                  rel="noopener noreferrer"
                  style="color: white"
                  target="_blank"
                >
                  GET DMD AIRDROP NOW →
                </a>
              </button>
            </div>
            <div class="right-info">
              <div class="d-flex align-items-center">
                <img class="icon" src="/src/assets/img/Group_2439.png" />
                <div class="d-flex flex-column">
                  <h4>Accessing Content</h4>
                  <p>
                    Generate your own content or pay DMDs for curated experiences others have
                    created
                  </p>
                </div>
              </div>
              <div class="d-flex align-items-center">
                <img class="icon" src="/src/assets/img/Group_2440.png" />
                <div class="d-flex flex-column">
                  <h4>Content Creation and Licensing</h4>
                  <p>
                    Content creators and celebrities earn DMDs for creating and licensing content
                    and experiences.
                  </p>
                </div>
              </div>
              <div class="d-flex align-items-center">
                <img class="icon" src="/src/assets/img/Group_2441.png" />
                <div class="d-flex flex-column">
                  <h4>Platform Development</h4>
                  <p>Holders of DMD vote on the direcion of platform development and priorities.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- small -->
      <div class="container-fluid" id="about-dmd-small">
        <div class="d-flex align-items-center" data-aos="fade-up" data-aos-duration="1500">
          <img class="top-icon" src="/src/assets/img/title.png" />
          <h1>ABOUT DMD</h1>
        </div>
        <div data-aos="fade-up" data-aos-duration="1500">
          <div class="sub-title">DMD is the economic and governance token for Dreamworlds.</div>
          <div class="default-btn" style="margin: 0; border-radius: 0">
            <a
              href="airdrop/airdrop-EN.html"
              rel="noopener noreferrer"
              style="color: white"
              target="_blank"
            >
              GET DMD AIRDROP NOW →
            </a>
          </div>
        </div>
        <div class="main-container mt-2" data-aos="fade-up" data-aos-duration="1500">
          <div class="info">
            <div class="d-flex align-items-center mb-1">
              <img class="icon" src="/src/assets/img/Group_2439.png" />
              <div class="d-flex flex-column">
                <h4 class="mb-2">Accessing Content</h4>
                <p>
                  Generate your own content or pay DMDs for curated experiences others have created
                </p>
              </div>
            </div>
            <div class="d-flex align-items-center mb-1">
              <img class="icon" src="/src/assets/img/Group_2440.png" />
              <div class="d-flex flex-column">
                <h4 class="mb-2">Content Creation and Licensing</h4>
                <p>
                  Content creators and celebrities earn DMDs for creating and licensing content and
                  experiences.
                </p>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <img class="icon" src="/src/assets/img/Group_2441.png" />
              <div class="d-flex flex-column">
                <h4 class="mb-2">Platform Development</h4>
                <p>Holders of DMD vote on the direcion of platform development and priorities.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Start RoadMap Area -->
    <!-- large -->
    <section
      class="roadmap-area section-bg"
      data-aos="fade-up"
      data-aos-duration="1500"
      id="roadmap-area-large"
    >
      <div class="d-flex align-items-center">
        <h1 class="flex-shrink-0">OUR MISSION</h1>
        <div class="verticle-line vr" style="width: 3px"></div>
        <div>
          <h5>Revolutionize immersive entertainment and empower user imagination.</h5>
          <div>
            Dreamworlds offers a scalable platform for AlGC creation and distribution. Significant
            blue ocean opportunities exist for revenue streams, including subscriptions,
            marketplaces, and advertising
          </div>
        </div>
      </div>
      <div class="roadmap-btn-group d-flex justify-content-between">
        <div class="d-flex">
          <div class="roadmap-btn active">NEWS</div>
          <div class="roadmap-btn">ROADMAP</div>
        </div>
        <a href="https://t.me/DMDcoinEnglish" rel="noopener noreferrer" target="_blank">
          <div class="default-btn square" style="margin: 0; border-radius: 0; padding: 15px 25px">
            Join In TG →
          </div>
        </a>
      </div>

      <div class="carousel slide" data-bs-touch="false" id="roadMapCarouselLarge">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="roadmap-container">
              <div class="roadmap-card">
                <img src="/src/assets/img/blogs/artical-6.jpg" />
                <section class="card-text-info">
                  <div class="title-container d-flex align-items-center"></div>
                  <div class="text">
                    <a href="articles/EN-art5-06-02.html" style="color: white" target="_blank"
                      >Dreamworlds (DMD): The AIGC Dark Horse Poised for Explosive Growth and
                      Investor Returns
                    </a>
                  </div>
                </section>
              </div>
              <div class="roadmap-card">
                <img src="/src/assets/img/blogs/artical-5.jpg" />
                <section class="card-text-info">
                  <div class="title-container d-flex align-items-center"></div>
                  <div class="text">
                    <a href="articles/EN-art5-06.html" style="color: white" target="_blank"
                      >Dreamworlds (DMD): Fueling the AI Content Revolution – Get in Early
                    </a>
                  </div>
                </section>
              </div>
              <div class="roadmap-card">
                <img src="/src/assets/img/blogs/artical-4.jpg" />
                <section class="card-text-info">
                  <div class="title-container d-flex align-items-center"></div>
                  <div class="text">
                    <a href="articles/EN-art5-04.html" style="color: white" target="_blank"
                      >Dreamworlds (DMD): The Next Hot AI Crypto? Here's Why It Could Explode</a
                    >
                  </div>
                </section>
              </div>
              <div class="roadmap-card">
                <img src="/src/assets/img/blogs/article-8.jpg" />
                <section class="card-text-info">
                  <div class="title-container d-flex align-items-center"></div>
                  <div class="text">
                    <a href="articles/article-1.html" style="color: white" target="_blank"
                      >Get Ready for “Dreamworlds” and its token DMD: A New Era in User-Friendly
                      AIGC Platform</a
                    >
                  </div>
                </section>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="container-fluid">
              <div class="d-flex flex-column align-items-center justify-content-center">
                <div class="d-flex align-items-center"></div>
                <img src="/src/assets/img/roadmap-EN.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- small -->
    <section
      class="roadmap-area section-bg"
      data-aos="fade-up"
      data-aos-duration="1500"
      id="roadmap-area-small"
    >
      <div class="d-flex align-items-center">
        <h1 class="flex-shrink-0">OUR MISSION</h1>
        <div class="verticle-line vr" style="width: 3px"></div>
        <h1>Revolutionize immersive entertainment and empower user imagination.</h1>
      </div>
      <div class="mt-3">
        Dreamworlds offers a scalable platform for AlGC creation and distribution. Significant blue
        ocean opportunities exist for revenue streams, including subscriptions, marketplaces, and
        advertising
      </div>
      <div class="d-flex justify-content-center mt-2 mb-3">
        <a href="https://t.me/DMDcoinEnglish" rel="noopener noreferrer" target="_blank">
          <div class="default-btn square" style="margin: 0; border-radius: 0; padding: 15px 25px">
            Join In TG →
          </div>
        </a>
      </div>
      <div class="roadmap-btn-group d-flex justify-content-between">
        <div class="d-flex">
          <div class="roadmap-btn active">NEWS</div>
          <div class="roadmap-btn">ROADMAP</div>
        </div>
      </div>

      <div class="carousel slide" data-bs-touch="false" id="roadMapCarouselSmall">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="roadmap-container">
              <div class="roadmap-card">
                <img src="/src/assets/img/blogs/artical-4.jpg" />
                <section class="card-text-info">
                  <div class="title-container d-flex align-items-center"></div>
                  <div class="text">
                    <a href="articles/EN-art5-04.html" style="color: white" target="_blank"
                      >Dreamworlds (DMD): The Next Hot AI Crypto? Here's Why It Could Explode</a
                    >
                  </div>
                </section>
              </div>
              <div class="roadmap-card">
                <img src="/src/assets/img/blogs/article-8.jpg" />
                <section class="card-text-info">
                  <div class="title-container d-flex align-items-center"></div>
                  <div class="text">
                    <a href="articles/article-1.html" style="color: white" target="_blank"
                      >Get Ready for “Dreamworlds” and its token DMD: A New Era in User-Friendly
                      AIGC Platform</a
                    >
                  </div>
                </section>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="container-fluid">
              <div class="d-flex flex-column align-items-center justify-content-center">
                <div class="d-flex align-items-center"></div>
                <img src="/src/assets/img/roadmap-EN.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- End RoadMap Area -->

    <!-- Start About Area -->
    <!--    <div class="about-area ptb-100 section-bg">-->
    <!--      <div class="container">-->
    <!--        <div class="row align-items-center" data-aos="fade-up" data-aos-duration="1500">-->
    <!--          <div class="col-lg-6">-->
    <!--            <div class="image">-->
    <!--              <img src="/src/assets/img/DMDtokens.png" alt="image" style="border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5)" />-->
    <!--            </div>-->
    <!--          </div>-->
    <!--          <div class="col-lg-6">-->
    <!--            <div class="content">-->
    <!--              <div class="sub-t">ABOUT DMD</div>-->
    <!--              <h2>Dreamworlds:</h2>-->
    <!--              <h3>Your Imagination, Our Community.</h3>-->
    <!--              <p>-->
    <!--                🤑 The DMD is an economic and governance token for Dreamworlds.🌌 1. Users pay and earn DMD tokens through the platform's content economy.<br />-->
    <!--                2. Content Creators earn DMD tokens through platform rewards and through licensing earnings. 3. Users can vote using DMD tokens and guide the development of the platform.<br />-->
    <!--              </p>-->
    <!--              <a href="https://gleam.io/wrX0d/lets-get-dmd-airdrop" target="_blank" class="main-btn"><span></span><i class="ri-quill-pen-line"></i> GET DMD NOW</a>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!-- About Area -->

    <!-- Start roadmap Area -->
    <!--    <div class="container">-->
    <!--      <div class="row align-items-center" data-aos="fade-up" data-aos-duration="1500">-->
    <!--        <div class="col-lg-12">-->
    <!--          <div class="content">-->
    <!--            <div class="sub-t">Roadmap</div>-->
    <!--            <h2>The roadmap is divided into three phases:</h2>-->
    <!--            <div style="text-align: center">-->
    <!--              &lt;!&ndash; 新添加的居中容器 &ndash;&gt;-->
    <!--              <img src="/src/assets/img/roadmap-EN.png" alt="Description of the image" style="width: 90%; height: auto" />-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!-- END Start roadmap Area -->

    <!-- Start community Area -->
    <!--    <div class="about-area ptb-100 section-bg">-->
    <!--      <div class="container">-->
    <!--        <div class="row align-items-center" data-aos="fade-up" data-aos-duration="1500">-->
    <!--          <div class="col-lg-12">-->
    <!--            <div class="content">-->
    <!--              <div class="sub-t">OUR COMMUNITY</div>-->
    <!--              <h2>-->
    <!--                Our mission: Revolutionize immersive entertainment<br />-->
    <!--                and empower user imagination.-->
    <!--              </h2>-->
    <!--              <p>Dreamworlds is poised to become the world's leading AIGC platform that offers immersive user experience in generated worlds with adaptive learning characters.<br /></p>-->
    <!--              <p></p>-->
    <!--              <a class="main-btn" href="https://t.me/DMDcoinEnglish" target="_blank"><span></span><i class="ri-quill-pen-line"></i> JOIN IN TG</a>-->
    <!--              <script type="text/javascript" src="https://widget.gleamjs.io/e.js" async="true"></script>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!-- community Area -->

    <!--Start Article3 Area-->
    <!--    <div class="article-area ptb-100">-->
    <!--      <div class="container">-->
    <!--        <div class="row">-->
    <!--          <div class="col-lg-4">-->
    <!--            <div class="section-title">-->
    <!--              <div class="width">-->
    <!--                <div class="sub-t">Our Latest News</div>-->
    <!--                <h2>Latest News & Articles</h2>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--          <div class="col-lg-8">-->
    <!--            <a href="EN-art5-04.html">-->
    <!--              <img src="/src/assets/img/blogs/article-8.jpg" alt="image" />-->
    <!--            </a>-->
    <!--            <h3><a href="EN-art5-04.html" target="_blank">Get Ready for “Dreamworlds” and its token DMD: A New Era in User-Friendly AIGC Platform</a></h3>-->
    <!--            <ul>-->
    <!--              <li>April 15, 2024</li>-->
    <!--            </ul>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--END Article3 Area-->

    <!-- Start Brands Area -->
    <div class="brands-area pt-70 pb-70">
      <div class="container">
        <div class="row justify-content-between align-items-center">
          <div class="col-lg-2 col-md-2 col-6" data-aos="fade-up" data-aos-duration="1000">
            <div class="image">
              <img alt="image" src="/src/assets/img/LLAMA.png" />
            </div>
          </div>

          <div class="col-lg-2 col-md-2 col-6" data-aos="fade-up" data-aos-duration="1000">
            <div class="image">
              <img alt="image" src="/src/assets/img/06.png" />
            </div>
          </div>

          <div class="col-lg-2 col-md-2 col-6" data-aos="fade-up" data-aos-duration="1000">
            <div class="image">
              <img alt="image" src="/src/assets/img/bloom.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Brands Area -->

    <!-- Start Footer Area -->
    <footer class="footer-area">
      <div class="container">
        <div class="footer-top-area pt-100">
          <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6">
              <div class="single-footer-widget">
                <a class="logo">
                  <h2>Dreamworlds</h2>
                </a>
                <p>Welcome to your world.</p>

                <ul class="social-links">
                  <li>
                    <a href="https://t.me/DMDcoinEnglish" target="_blank"
                      ><i class="ri-telegram-line"></i
                    ></a>
                  </li>
                  <li>
                    <a href="https://twitter.com/Dreamworld49453" target="_blank"
                      ><i class="ri-twitter-line"></i
                    ></a>
                  </li>
                </ul>
              </div>
            </div>

            <div class="col-lg-2 col-md-6 col-sm-6">
              <div class="single-footer-widget pl-5">
                <h3>Links</h3>
                <ul class="links-list">
                  <li><a href="http://dreamworlds.ai/">Home</a></li>
                  <li>
                    <a
                      href="https://chen-bing-bingsorganization.gitbook.io/dreamworlds/1.project-overview"
                      target="_blank"
                      >White paper</a
                    >
                  </li>
                  <li>
                    <a href="https://t.me/DMDcoinEnglish" target="_blank">Community(Telegram)</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="pr-line"></div>
        <div class="footer-bottom-area">
          <p>© 2024 Dreamworlds.ai | All Rights Reserved</p>
        </div>
      </div>
      <div class="lines">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </footer>
    <!-- End Footer Area -->

    <!-- Start Top to Bottom -->
    <div id="progress">
      <span id="progress-value"><i class="ri-arrow-up-line"></i></span>
    </div>
    <!-- End Top to Bottom -->
  </main>
</template>
